<template>
  <div>
    <v-row align="center" justify="center">
      <v-img class="mt-8" src="../assets/logo.png" max-width="200"></v-img>
    </v-row>
    <v-row align="center" justify="center">
      <v-col cols="10" sm="8" md="6" lg="6">
        <v-form v-model="valid" class="mt-12">
          <v-text-field
            v-model="account"
            :rules="[rules.required]"
            label="账号"
            solo
            prepend-inner-icon="mdi-account"
            required
          ></v-text-field>
          <v-text-field
            class="mt-4"
            v-model="password"
            :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
            :rules="[rules.required]"
            :type="show1 ? 'text' : 'password'"
            @click:append="show1 = !show1"
            label="密码"
            solo
            prepend-inner-icon="mdi-key"
            required
          ></v-text-field>
          <div class="text-center">
            <v-btn
              class="ma-2"
              :disabled="!valid"
              color="primary"
              @click="submit()"
              :dark="valid"
            >登录</v-btn>
          </div>
        </v-form>
      </v-col>
    </v-row>
    <v-dialog v-model="dialog.show" max-width="350">
      <v-card>
        <v-card-title class="headline">焦点摄影工作室</v-card-title>
        <v-card-text>{{ dialog.message }}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            text
            @click="dialog.show = false; if (dialog.action.reset) { $refs.form.reset(); dialog.action.reset = false; } processing = false;"
            dark
          >好</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>
export default {
  name: "reservation",
  data: () => ({
    account: "",
    password: "",
    show1: false,
    valid: false,
    dialog: { show: false, message: "", action: { reset: false } },
    rules: {
      required: value => !!value || "必填字段."
    }
  }),
  methods: {
    submit: function() {
      const that = this;
      this.axios
        .post("http://www.hdufocus.cn:8081/login", {
          username: that.account,
          password: that.password
        })
        .catch(function() {
          that.dialog.message = "登录失败！";
          that.dialog.show = true;
        })
        .then(function(response) {
          const status = response.status;
          if (status === 200) {
            var token = response.data.data;
            localStorage.setItem("token", token);
            that.$router.push({ path: "/" });
          } else {
            that.dialog.message = "未知错误！请稍后再试";
            that.dialog.show = true;
          }
        });
    }
  }
};
</script>